<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel />
    <template #searchPanel>
      <search-panel :show-add-button="true" :show-search-button="true" @search="search" labelWidth="45" @insert="handleDataInsert" :left="true">
<!--            <el-form-item label="运营商:">-->
<!--              <el-input v-model="filters.province" style="width: 200px" placeholder="用户姓名" />-->
<!--            </el-form-item>-->
            <el-form-item label="省份:">
              <el-input v-model="filters.province" maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="地市:">
              <el-input v-model="filters.city" maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="号码:">
              <el-input v-model="filters.phone" maxlength="100" clearable />
            </el-form-item>
            <el-form-item label="状态:">
              <el-select v-model="filters.state" placeholder="提单状态" clearable >
                <el-option value="2" label="全部">全部</el-option>
                <el-option value="0" label="允许提单">允许提单</el-option>
                <el-option value="1" label="禁止提单">禁止提单</el-option>
              </el-select>
            </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :current="start"
        :width="170"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #action="{row}">
          <el-button size="small" round @click="editRow(row)">编辑</el-button>
          <el-button size="small" round @click="handleBan(row)"> {{row.state == '0' ? '禁止提单' : '允许提单'}} </el-button>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <el-form :model="form" label-width="100px" ref="form">
        <el-form-item label="运营商" prop="serviceProvider">
          <el-input v-model="form.serviceProvider" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="省份名称" prop="province">
          <el-input v-model="form.province" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地市名称" prop="city">
          <el-input v-model="form.city" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="充值号码" prop="phone">
          <el-input v-model="form.phone" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button round size="small" @click.native="dialogVisible = false">取消</el-button>
        <el-button round size="small" type="primary" @click.native="onSubmit" >提交</el-button>
      </div>
    </template>

  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import DialogDataForm from './components/DialogDataForm'
import { findPageMobile , updateMobileStatus, updateMobile} from '@/api/utilsapi'


export default {
  name: 'mobile',
  components: { DialogDataForm },
  mixins: [
    baseMixin({
      idName: 'id',
      findData:findPageMobile,
      format(res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data() {
    return {
      buttons: [],
      pageShow: true,
      dialogData:{},
      tableColumnAttributes: [
        { name: '运营商', value: 'serviceProvider' },
        { name: '省份名称', value: 'province' },
        { name: '地市名称', value: 'city' },
        { name: '充值号码(前7位)', value: 'phone' },
        { name: '是否禁止提单', value: 'state', formatter: this.stateFormatter },
      ],
      filters: {
        city: '',
        province:'',
        phone:'',
        state:''
      },
      form: {
        city: '',
        province:'',
        phone:'',
        state:'',
        serviceProvider:''
      }
    }
  },
  methods: {
    stateFormatter(row, column){
      return row.state === 0 ? "允许提单" : row.state === 1 ? "禁止提单" : "其他";
    },
    async search(form){
      let para = {
        city: this.filters.city,
        start: 0,
        pageSize: 10,
        province: this.filters.province ,
        phone: this.filters.phone,
        state: this.filters.state == 2 ? "" : this.filters.state
      };
      this.searchOptions = para;
      this.setTableData()
    },
    handleBan(row){
      this.$confirm('确认更新该号段状态吗?', '提示', {
        type: 'warning',
        roundButton:true
      }).then(async () => {
        let para = {
          state: row.state == "0" ? "1" : "0",
          id: row.id
        };
        const result = await updateMobileStatus(para);
        this.resultApply(result);
      });
    },
    onSubmit(row){
      this.$confirm('确认提交吗？', '提示', {roundButton:true}).then( async () => {
        if(this.form.id ){
          let para = Object.assign({}, this.form);
          const result = await updateMobile(para);
          this.resultApply(result);
        }else{
          let para = Object.assign({}, this.form);
          para.id = "";
          const result = await updateMobile(para);
          this.resultApply(result);
        }
      });
    }
  }
}
</script>
